<!DOCTYPE html>

<html>

	<head>
		
		<!-- Title -->
		<title>Elements Demo - CheerApp HTML Template Demo</title>
		
		<!-- Meta tags -->
		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/light-blue.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
		
		<!-- JavaScript -->
		<script src="js/forms.js" type="text/javascript"></script>
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="js/royal.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			document.documentElement.className += 'js-ready';
		</script>
		
		<!-- IE scripts and stylesheets -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/iefixes.js" type="text/javascript"></script>
		<![endif]-->
		
	
	</head>
	
	
	<body>
	
		<div id="wrap">
		
			<header id="header">
				<div class="inner-wrap clearfix">
				
					<h1 id="logo">
						<a href="index.html">CheerApp - Premium HTML App Template - Demo</a>
					</h1>
					
					<nav class="dropdown">
						<ul id="nav" class="clearfix">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="#">Features</a>
								<ul>
									<li><a href="4-column-pricing.html">Pricing&nbsp;tables</a>
										<ul>
											<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
											<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
											<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
										</ul>
									</li>
									<li><a href="wiki.html">Knowledgebase</a>
										<ul>
											<li><a href="wiki-single.html">Single&nbsp;article</a></li>
											<li><a href="wiki.html">Archive</a></li>
										</ul>
									</li>
									<li><a href="register.html">Registration&nbsp;Form</a></li>
									<li><a href="elements.html">Styling&nbsp;demos</a></li>
								</ul>
							</li>
							<li><a href="wiki.html">Knowledgebase</a>
								<ul>
									<li><a href="wiki-single.html">Single&nbsp;article</a></li>
									<li><a href="documentation/index.html">Documentation</a></li>
									<li><a href="contact.html">Contact&nbsp;support</a></li>
								</ul>
							</li>
							<li><a href="4-column-pricing.html">Pricing</a>
								<ul>
									<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
									<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
									<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
								</ul>
							</li>
							<li><a href="blog.html">Blog</a>
								<ul>
									<li><a href="blog-single.html">Single&nbsp;post</a></li>
									<li><a href="blog.html">Monthly&nbsp;archives</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul><!-- end #nav -->
					</nav>
					
					<div class="login">
						
						<!-- Use "user-info" div once the user has logged in and hide the login/register links and login form -->
						<!--						
						<div class="user-info">
							<p>Logged in as <span class="username">Username</span> <a class="logout" href="#">(logout)</a></p>
						</div>
						-->
						
						<ul class="login-links">
							<li><a href="register.html">Register</a></li>
							<li><a class="login-link" href="#">Login</a></li>
						</ul><!-- end .login-links -->
						
						<form id="login-form" method="post" action="#">
						
							<p>
								<label for="username">Username</label>
								<input name="username" value="" id="username" type="text" required placeholder="Username" />
							</p>
							<p>
								<label for="password">Password</label>
								<input name="password" value="" id="password" type="password" required placeholder="Password" />
							</p>
							<p class="forgot"><a href="#">Forgot?</a></p>
							<p>
								<input class="login-submit" type="submit" value="Login" name="submit" />
							</p>
						
						</form>
						
					</div><!-- end #login -->
					
				</div><!-- end .inner-wrap -->
			</header><!-- end header -->
			
			
			<div id="featured">
				<div class="inner-wrap">
				
					<div class="breadcrumb">
						<h2>
							<small><a href="features.html">Features</a> /</small>
							Elements and layout demo
						</h2>
					</div>
					
					<form id="searchform" method="get" action="search.html" class="clearfix">
						<p>
							<input type="text" value="" name="s" id="s" placeholder="Start searching..." autocomplete="off" />
						</p>
						<p>
							<input type="submit" id="searchsubmit" value="" />
						</p>
					</form>
				
				</div><!-- end .inner-wrap -->
			</div><!-- end #featured -->
			
			
			<div id="main">
				<div class="inner-wrap clearfix">
				
					<div class="content content-full">
					
						<div class="column-container">
					
							<div class="column third">
								<h3>Special list styling</h3>
								<p>Check out several list stylings that CheerApp offers. Assign classes to unordered lists to change their appearance.</p>
								<h5>Links list</h5>
								<ul class="links">
									<li><a href="#">This is a list item</a></li>
									<li><a href="#">Lorem ipsum dolor sit amet</a></li>
									<li><a href="#">Sit amet consectetur</a></li>
									<li><a href="#">Adipiscing elit et consectetur</a></li>
									<li><a href="#">Donec mollis gravida lorem</a></li>
								</ul>
								<h5>Info list</h5>
								<ul class="info">
									<li><small>Date: </small>12 January 2011</li>
									<li><small>Version: </small>1.0</li>
									<li><small>Size: </small>427 MB</li>
									<li><small>URI: </small><a href="#">http://example.com</a></li>
									<li><small>Author: </small>Mateusz Hajdziony</li>
								</ul>
								<h3>White space</h3>
								<p>Below is a piece of white space. You can create more white space by closing boxes on the right :)</p>
							</div><!-- end .third -->
							
							<div class="column two-thirds">
								<h3>Info boxes</h3>
								<p>Check out below how cool are <strong>info</strong>, <strong>resource</strong> and <strong>warning</strong> boxes. use them to make sure that your users will never miss any important announcements or to point users to some useful resources.</p>
								<div class="box box-info">
									<div class="box-content">
										<h3>
											<small>Lorem ipsum dolor</small>
											This is an info box
										</h3>
										<ul class="info clearfix">
											<li><small>This is an unordered list: </small>inside info box</li>
											<li><small>Another: </small>list item</li>
										</ul>
									</div><!-- end .box-content -->
								</div><!-- end .box-info -->
								<div class="box box-resource">
									<div class="box-content">
										<h3>
											<small>Point your customers to</small>
											<a href="#">Some cool resource using this box</a>
										</h3>
										<ul class="info clearfix">
											<li><small>Source: </small><a href="#">http://example.com</a></li>
											<li><small>Release date: </small>18 November 2018</li>
										</ul>
									</div><!-- end .box-content -->
								</div><!-- end .box-resource -->
								<div class="box box-warning">
									<div class="box-content">
										<h3>
											<small>Tell your users that</small>
											<a href="#">They are crossing the line</a>
										</h3>
										<ul class="info clearfix">
											<li>With this cool warning box. You can place some description here, or use info list like in examples above.</li>
										</ul>
									</div><!-- end .box-content -->
								</div><!-- end .box-warning -->
							</div><!-- end .two-thirds -->
						
						</div><!-- end .column-container -->
						
						<hr />
						
						<div class="column-container">
						
							<div class="column third">
								<h2>Headings</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <abbr title="Hypertext Markup Language">HTML</abbr> Donec mollis gravida lorem et.</p>
								<h1>This is h1 heading</h1>
								<h2>This is h2 heading</h2>
								<h3>This is h3 heading</h3>
								<h4>This is h4 heading</h4>
								<h5>This is h5 heading</h5>
								<h6>This is h6 heading</h6>
							</div><!-- end .third -->
							<div class="column two-thirds">
								<h2>Buttons</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <abbr title="Hypertext Markup Language">HTML</abbr> Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque.</p>
								<a class="button button-arrow">Button with arrow<span class="icon"></span></a>
								<hr />
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <abbr title="Hypertext Markup Language">HTML</abbr> Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque.</p>
								<a class="button button-mail">Contact button<span class="icon"></span></a>
								<a class="button button-like">Like button<span class="icon"></span></a>
								<a class="button button-buy">Purchase button<span class="icon"></span></a>
							</div><!-- end .two-thirds -->
						</div><!-- end .column-container -->
						
						<hr />
						
						<h3>Columns</h3>
						<div class="column-container">
							<div class="column half">
								<h6>Column with &quot;half&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <abbr title="Hypertext Markup Language">HTML</abbr> Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
							<div class="column half">
								<h6>Column with &quot;half&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column third">
								<h6>Column with &quot;third&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
							<div class="column third">
								<h6>Column with &quot;third&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
							<div class="column third">
								<h6>Column with &quot;third&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column two-thirds">
								<h6>Column with &quot;two-thirds&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rutrum, nisi ut molestie vestibulum, mi massa tincidunt neque, nec egestas urna nunc non nisl. Vestibulum ante ipsum primis in faucibus.</p>
							</div>
							<div class="column third">
								<h6>Column with &quot;third&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column half">
								<h6>Column with &quot;half&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column three-fourths">
								<h6>Column with &quot;three-fourths&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor elit venenatis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rutrum, nisi ut molestie vestibulum, mi massa tincidunt neque, nec egestas urna nunc non nisl. Vestibulum ante ipsum primis in faucibus.</p>
							</div>
							<div class="column fourth">
								<h6>Column with &quot;fourth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column four-fifths">
								<h6>Column with &quot;four-fifths&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
							<div class="column fifth">
								<h6>Column with &quot;fifth&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<div class="column-container">
							<div class="column two-fifths">
								<h6>Column with &quot;two-fifths&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div><div class="column three-fifths">
								<h6>Column with &quot;three-fifths&quot; class</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis gravida lorem et consectetur. Fusce aliquam tempor.</p>
							</div>
						</div><!-- end .column-container -->
						
						<hr />
						
						<h3>Widgets</h3>
						<div class="column-container">
							<div class="column third">
								<img src="assets/icons/icon-32x32.png" width="32" height="32" alt="WP Icon" class="icon" />
								<h5>Text block with icon</h5>
								<p>
									WordPress edition is currently under development. WordPress version will feature cool things like live search functionality so stay tuned!
								</p>
								<p>
									You can <a href="http://themeforest.net/user/pogoking/follow">follow me on ThemeForest</a> to be notified when my new items are released or <a href="http://twitter.com/pogoking">follow me on Twitter</a> and be the first to know about all my future theme updates and releases!
								</p>
							</div><!-- end .third -->
							<div class="column third">
								<h5>Latest blog entries</h5>
								<ul class="latest-post-widget">
									<li>
										<h5 class="latest-post-title"><a href="blog-single.html">Importance of typography in web design</a></h5>
										<span class="post-meta">3 June 2011 <small>in</small> <a href="blog.html">Web design</a></span>
									</li>
									<li>
										<h5 class="latest-post-title"><a href="blog-single.html">CheerApp 1.0 update ready for download</a></h5>
										<span class="post-meta">27 May 2011 <small>in</small> <a href="blog.html">News</a>, <a href="blog.html">Updates</a></span>
									</li>
									<li>
										<h5 class="latest-post-title"><a href="blog-single.html">Why lorem ipsum dolor sit amet?</a></h5>
										<span class="post-meta">16 May 2011 <small>in</small> <a href="blog.html">Articles</a>, <a href="blog.html">Web development</a></span>
									</li>
								</ul><!-- end .latest-post-widget -->
							</div><!-- end .third -->
							
							<div class="column third">
								<h5>Version history</h5>
								<ul class="version-history-widget">
									<li class="latest">
										<span class="version">v1.0</span>
										<ul class="info">
											<li><small>Date: </small>3 June 2011</li>
											<li><small>Size: </small>2.1 MB</li>
										</ul>
										<a class="changelog" href="#">View changelog</a>
										<a class="download" href="#">Download</a>
									</li>
									<li>
										<span class="version">v0.9b</span>
										<span class="date">26 May 2011</span>
										<span class="size">1.9 MB</span>
										<a class="download" href="#">Download</a>
									</li>
									<li>
										<span class="version">v0.8</span>
										<span class="date">18 May 2011</span>
										<span class="size">1.6 MB</span>
										<a class="download" href="#">Download</a>
									</li>
								</ul><!-- end .latest-post-widget -->
							</div><!-- end .third -->
						</div><!-- end .column-container -->
						
					</div><!-- end .content -->
					
				</div><!-- end .inner-wrap -->
			</div><!-- end #main -->
		
		</div><!-- end #wrap -->
		
		
		<footer id="footer">
			<div class="inner-wrap">
			
				<nav>
					<ul id="footer-nav" class="clearfix">
						<li><a href="index.html">Home</a></li>
						<li><a href="4-column-pricing.html">Sign up</a></li>
						<li><a href="#">Legal</a></li>
						<li><a href="wiki.html">Support</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
				
				<!-- Set margin-top on logo to negative half of image height (to center it vertically) in CSS (.footer-logo) -->
				<a href="index.html"><img class="footer-logo" src="images/light-blue/logo-small.png" width="107" height="39" alt="logo" /></a>
				
				<small class="copyright">&copy;2011&nbsp;&nbsp;&middot;&nbsp;&nbsp;CheerApp HTML template by <a href="http://themeforest.net/user/pogoking?ref=pogoking">Mateusz Hajdziony</a></small>
			
			</div>
		</footer><!-- end footer -->
	
	</body>

</html>